<template>
  <div>
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="(v,index) in arr" :key="index">
    <div class="t1">
      <img :src="v.src" alt="">
    </div>
  </van-swipe-item>
</van-swipe>
<div class="box">
    <img src="../../../assets/img/fj.png" alt="">
</div>
  </div>
</template>

<script>
import axios from "axios"
let service = axios.create()
export default {
  data(){
    return {
      arr:[],
    }
  },
     mounted(){
    service({
            url:"http://localhost:3000/lhstorebanner",
            method:"get"
        }).then(res=>{
            this.arr = res.data
        })
  }
}
</script>

<style scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #fff;
  }
  .my-swipe  {
    width: 94%;
    margin: auto;
  }
  .t1{
    height: 120px;
    width: 355px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 12px;
    border-color: rgb(255, 255, 255);
    background-position: center center, center center;
  }

  .t1 img {
    height: 120px;
    width: 355px;
    background-size: cover;
  }
  
  .box {
    width: 100%;
    height: 16px;
    background-color: transparent;
  }
  .box img {
    width: 100%;
  }
</style>